<template>
	<view class="mywallet">
		<view class="content">
			<!-- 1 -->
			<view class="title_bar">
				<view class="mingxi" @click="showMingxi">
					零钱明细
				</view>
			</view>
			<!-- 2.icon -->
			<view class="icon_lq">
				<text class="iconfont icon-lingqian"></text>
				
			</view>
			<view class="money">
				<view class="mymo">
					我的零钱
				</view>
				<text>¥{{ money.money }}</text>
				<view class="mark">
					<van-tag mark type="primary">诚信保证金{{ money.honestgold }}元</van-tag>
				</view>
			</view>
			<view class="btn_box">
				<button type="primary" class="cz">充值</button>
				<button type="" class="cz" @click="TiXian">提现</button>
			</view>
		</view>
		
		<!-- 提现 dialog -->
		 <view class="tixiandialog">
		 	<van-dialog
		 	  use-slot
		 	  :title="tx.title"
		 	  :show="tx.show"
			  type="digit"
		 	  show-cancel-button
		 	  @confirm="onConfirm"
		 	>
		 	
		 	    <van-field
		 	      :value="moneyData"
		 	      required
		 	      clearable
		 	      label="提现金额"
		 	      @change="valueChange"
		 	      placeholder="请输入提现金额"
		 	      
		 	    />
		 	  
		 	</van-dialog>
		 </view>
	</view>
</template>

<script>
	export default {
		computed: {
			token() {
				return this.$store.state.token;
			}
		},
		data() {
			return {
				money: {},
				tx: {
					show: false,
					title: "提现"
				},
				moneyData: "",
			}
		},
		onShow() {
			this.getMoneyInfo()
		},
		methods: {
			// 获取钱包明细
			async getMoneyInfo() {
				console.log(this.token);
				let res = await this.$Request("POST","/mydata/money", { token: this.token })
				
				if(res.data.code == 202) {
					this.money = res.data.data[0]
				} else {
					this.money = {
						money: 0,
						honestgold: 0,
						redpacket: 0
					}
				}
			},
			
			// 展示零钱明细
			showMingxi() {
				uni.navigateTo({
					url: "../mingxi/mingxi"
				})
			},
			// 提现
			TiXian() {
				this.tx = {
					title: "零钱提现",
					show: true
				}
			},
			valueChange(e) {
				// console.log(e.detail);
				this.moneyData = e.detail
			},
			// 确认提现
			async onConfirm() {
				let all = this.money.money
				if(this.moneyData && this.moneyData <= this.money.money) {
					let res = await this.$Request("POST","/mydata/tixian", { token: this.token, realgold: this.moneyData })
					this.tx = {
						show: false
					}
					this.moneyData = ""
				} else {
					console.log("不能提现");
					this.tx = {
						show: false
					}
					this.moneyData = ""
					return false
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.mywallet {
		width: 100%;
		box-sizing: border-box;
		.content {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			.title_bar {
				font-size: 30rpx;
				cursor: pointer;
				text-align: right;
			}
			.icon_lq {
				width: 100%;
				padding-top: 20%;
				box-sizing: border-box;
				text-align: center;
				color: green;
				text {
					font-size: 80rpx;
				}
			}
			.money {
				width: 100%;
				box-sizing: border-box;
				text-align: center;
				height: 50rpx;
				line-height: 50rpx;
				margin-top: 20rpx;
				.mymo {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					color: #000;
				}
			}
			.btn_box {
				text-align: center;
				width: 100%;
				box-sizing: border-box;
				position: fixed;
				left: 0;
				bottom: 300rpx;
				button {
					width: 200rpx;
					font-size: 30rpx;
					margin: 20rpx auto;
				}
			}
		}
	}
</style>
